﻿<!DOCTYPE html>
<html lang="=en">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <style>
        html, body {
            margin: 0;
            height: 100vh;
            cursor: default;
            user-select: none;
            padding: 0;
        }

        .border {
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            padding: 8px 21px 25px 13px;
            /*
                hOffset = 5
                vOffset = 5
                blur = 15
                spread = 0

                top = spread - vOffset + blur / 0.75       = 0 - 5 + 15 / 0.75 = 15
                right = spread + hOffset + blur / 0.75     = 0 + 5 + 15 / 0.75 = 25
            */
        }

        .window--maximized .border {
            padding: 0;
        }

        @property --gradient-color1 {
            syntax: '<color>';
            inherits: false;
            initial-value: #e024a8ef;
        }

        @property --gradient-color2 {
            syntax: '<color>';
            inherits: false;
            initial-value: #1f1013;
        }

        .container-box {
            /*            border-radius: 30px 0 30px 0;*/
            /*            border: 2px solid #57344c;*/
            border-radius: 20px;
            box-sizing: content-box;
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            box-shadow: 3px 8px 15px #e024a8cc;
            transition: box-shadow ease-in-out 0.5s;
        }

        .window--maximized .container-box {
            border-radius: 0px;
        }

        .window--deactivated .container-box {
            box-shadow: 3px 8px 15px #00000077;
        }

        .content-box {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: radial-gradient(var(--gradient-color1),var(--gradient-color2));
            animation: fadeIn 1 1s ease-out;
            transition: ease all 0.3s, --gradient-color1 1s, --gradient-color2 1s;
        }



        .window--deactivated .content-box {
            --gradient-color1: #92979cfa;
            --gradient-color2: #1f1013fa;
        }

        .light {
            position: absolute;
            width: 0px;
            opacity: .75;
            background-color: white;
            box-shadow: #e9f1f1 0px 0px 20px 2px;
            opacity: 0;
            top: 100vh;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
        }

        .x1 {
            animation: floatUp 4s infinite linear;
            transform: scale(1.0);
        }

        .x2 {
            animation: floatUp 7s infinite linear;
            transform: scale(1.6);
            left: 15%;
        }

        .x3 {
            animation: floatUp 2.5s infinite linear;
            transform: scale(.5);
            left: -15%;
        }

        .x4 {
            animation: floatUp 4.5s infinite linear;
            transform: scale(1.2);
            left: -34%;
        }

        .x5 {
            animation: floatUp 8s infinite linear;
            transform: scale(2.2);
            left: -57%;
        }

        .x6 {
            animation: floatUp 3s infinite linear;
            transform: scale(.8);
            left: -81%;
        }

        .x7 {
            animation: floatUp 5.3s infinite linear;
            transform: scale(3.2);
            left: 37%;
        }

        .x8 {
            animation: floatUp 4.7s infinite linear;
            transform: scale(1.7);
            left: 62%;
        }

        .x9 {
            animation: floatUp 4.1s infinite linear;
            transform: scale(0.9);
            left: 85%;
        }


        @keyframes floatUp {
            0% {
                top: 100vh;
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                top: 0vh;
                opacity: .8;
            }

            75% {
                opacity: 1;
            }

            100% {
                top: -100vh;
                opacity: 0;
            }
        }

        .header {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
            font-weight: 200;
            color: white;
            font-size: calc(4vh);
            text-shadow: 0 0 30px #ffffff;
            text-align: center;
            line-height: 1.5;
        }

            .header a {
                font-size: 0.8em;
                color: white;
                text-decoration: underline;
            }

        #head1, #head2, #head3, #head4, #head5 {
            opacity: 0;
        }

        #head1 {
            animation: fadeOut 1 5s ease-in;
        }

        #head2 {
            animation: fadeOut 1 5s ease-in;
            animation-delay: 6s;
        }

        #head3 {
            animation: fadeOut 1 5s ease-in;
            animation-delay: 12s;
        }

        #head4 {
            animation: fadeOut 1 5s ease-in;
            animation-delay: 17s;
        }

        #head5 {
            animation: finalFade 1 5s ease-in;
            animation-fill-mode: forwards;
            animation-delay: 22s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            0% {
                opacity: 0;
            }

            30% {
                opacity: 1;
            }

            80% {
                opacity: .9;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes finalFade {
            0% {
                opacity: 0;
            }

            30% {
                opacity: 1;
            }

            80% {
                opacity: .9;
            }

            100% {
                opacity: 1;
            }
        }

        .button {
            position: absolute;
            border: 2px solid white;
            background: transparent;
            color: white;
            width: 160px;
            height: 40px;
            font-size: 1.2em;
            border-radius: 5px;
            opacity: .5;
            top: 60vh;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
            transition: all ease 0.3s, box-shadow ease-out 2s;
            text-align: center;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .button:hover {
                border: 2px solid rgba(365,365,365,0.5);
                background-color: rgba(365,365,365,0.5);
                color: #444;
                opacity: .9;
                transition: all ease 0.3s, box-shadow ease-in-out 0.5s;
                box-shadow: 0 3px 27px 0 rgba(255,255,255,0.9);
            }

        .command-box {
            position: absolute;
            top: 5px;
            right: 15px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            z-index: 100;
            app-region: no-drag;
        }



            .command-box > div {
                font-family: "Segoe MDL2 Assets" !important;
                width: 40px;
                height: 40px;
                color: #ffffff90;
                display: flex;
                justify-content: center;
                align-items: center;
                transform: translateY(-100%);
                transition: all ease-in-out 0.3s;
                opacity: 0;
                font-size: 0.8em;
            }

                .command-box > div:after {
                    font-family: "Segoe MDL2 Assets" !important;
                }

        .container-box:hover .command-box > div {
            transform: translateY(0);
            opacity: 1;
        }

            .container-box:hover .command-box > div:nth-child(1) {
                transition-duration: 0.2s;
            }

            .container-box:hover .command-box > div:nth-child(2) {
                transition-duration: 0.4s;
            }

            .container-box:hover .command-box > div:nth-child(3) {
                transition-duration: 0.6s;
            }

        .command-box > div:hover {
            color: #ffffffef;
            text-shadow: 0 0 15px #e087c5;
        }

        .command-box > div.min:after {
            content: "\E921";
        }

        .command-box > div.max:after {
            content: "\E922";
        }

        .window--maximized .command-box > div.max:after {
            content: "\E923";
        }

        .command-box > div.close:after {
            content: "\E8BB";
        }

        .titlbar-box {
            width: 100%;
            top: 0;
            left: 0;
            height: 40px;
            right: 0;
            app-region: drag;
            position: absolute;
            z-index: 1;
        }
    </style>

    <script>
        window.addEventListener("load", () => {
            const btn = document.getElementById("btnExperience");
            btn.addEventListener("click", () => {
                window.chrome.webview.postMessage("ExperienceClicked");
            });
        });
    </script>

</head>
<body>
    <div class="border">
        <div class="container-box">
            <div class="titlbar-box"></div>
            <div class="command-box">
                <div class="min" title="最小化" app-command="minimize"></div>
                <div class="max" title="最大化" app-command="maximize"></div>
                <div class="close" title="关闭" app-command="close"></div>
            </div>
            <div class="content-box">
                <p id='head1' class='header'>向您隆重介绍.NET开源组件<br />WinFormedge</p>
                <p id='head2' class='header'>基于 Microsoft WebView2 的 Windows 窗体应用程序界面引擎</p>
                <p id='head3' class='header'>轻松创建具有现代化、丰富视觉吸引力的 WinForm 应用程序</p>
                <p id='head4' class='header'>感谢关注 WinFormedge 项目<br />让我们一起探索</p>
                <p id='head5' class='header'>
                    欢迎体验 WinFormedge 界面组件
                </p>
                <a class="button" id="btnExperience">了解更多</a>
                <div class='light x1'></div>
                <div class='light x2'></div>
                <div class='light x3'></div>
                <div class='light x4'></div>
                <div class='light x5'></div>
                <div class='light x6'></div>
                <div class='light x7'></div>
                <div class='light x8'></div>
                <div class='light x9'></div>
            </div>
        </div>
    </div>
</body>
</html>